@charset "utf-8";
$width:1190px;
$chover:#e5004f;
.margin{
    width: $width;
    margin: 0 auto;
    }
#header{
    width: 100%;
    height: 34px;
    background-color: #eee;
    border-bottom: 1px solid #fff;
    .separator{
                float: left;
                width: 0;
                height: 14px;
                line-height: 14px;
                position: relative;
                top: 10px;
                left: 0;
                font-size: 0;
                overflow: hidden;
                border-left: 1px solid #ccc;
                margin: 0 4px;
           }
    .left{float: left;
          li{
              float: left;
              position: relative;
           }
           
           a{color: #666;line-height: 34px;display:block;}
           
             #first{
                 
                 padding-left: 27px;
                 margin: 0 6px;}
             #second{
                width: 50px;
                margin: 0;
                padding: 0 20px 0 31px;
                position: relative;
             }
             #third{
                width: 72px;
                margin: 0;
                padding-left: 28px;
                position: relative;
             }
             
           s{ display: block;
              position: absolute;
              background: url(../images/header-02.png) 0 0 no-repeat;
              width: 21px;
              height: 21px;
              left: 6px;
              top: 7px;
               z-index: 2;
               }
          
           #first s{
              background-position: -225px 0;
               }
           #first:hover s{background-position: -225px -27px;}
           #second s{background-position: -225px -57px;}
           #second b{
               transition: .5s;
           }
           #second:hover{background: #fff;color: $chover;}
           #second:hover s{
               background-position: -225px -88px;
           }
            #second:hover b{
                background-position: -175px -128px;
                transform: rotate(180deg);
                -webkit-transform: rotate(180deg);
            }
           li:nth-child(3):hover .hide{
               display: block;
           }
           #third s{height: 20px;
    background: url('http://r.ytrss.com/rs/img/homepage/phone.png') center 0 no-repeat;}
           }
           #first:hover{color: $chover;}
           #second b{position: absolute;
            left: 62px;
            top: 16px;
            width: 9px;
            height: 5px;
            overflow: hidden;
            background: url(../images/header-02.png) -175px -111px no-repeat;
            transition: transform .2s ease-in 0s;
            -webkit-transition: -webkit-transform .2s ease-in 0s;
            }
            #third b{
              position: absolute;
              left: 82px;
              top: 16px;
              width: 9px;
              height: 5px;
              overflow: hidden;
              background: url(../images/header-02.png) -175px -111px no-repeat;
              transition: transform .2s ease-in 0s;
              -webkit-transition: -webkit-transform .2s ease-in 0s;
            }
            li:nth-child(5):hover .hide{
                display: block;
            }
            li:nth-child(5) .hide{
                 bottom: -144px;
             }
            #third:hover{color: $chover;}
            #third:hover s{
                background-position: center bottom;
            }
            #third:hover b{
                 background-position: -175px -128px;
                transform: rotate(180deg);
                -webkit-transform: rotate(180deg);
            }
   .right{
       float: right;
       line-height: 34px;
      li{  float: left;
          color: #666;
          padding-right: 10px;
      }
      a:hover{color: $chover;}
        }
        li:nth-child(7){
            position: relative;
            width: 70px;
            b{
                position: absolute;
              left: 70px;
              top: 16px;
              width: 9px;
              height: 5px;
              overflow: hidden;
              background: url(../images/header-02.png) -175px -111px no-repeat;
              transition: transform .2s ease-in 0s;
              -webkit-transition: -webkit-transform .2s ease-in 0s;
            }
        }
        li:nth-child(7):hover{background: #fff;}
        li:nth-child(7):hover .yintai{
            display:block;
        }
        li:nth-child(7):hover b{
            background-position: -175px -128px;
            transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
        }
    .yintai{
        display:none;
       
        text-align: center;
        position: absolute;
        bottom:-120px;
        left: 0;
        background: #fff;
        height: 120px;
        width: 100%;
        z-index: 2;
        a{
            text-align: center;
            color: #666;
            display: block;
            width: 100%;
            height: 18px;
            padding-bottom: 3px;
            border-bottom: 1px solid #ccc;
            line-height: 18px;
        }
        a:hover{
            text-decoration: underline;
            color: $chover;
        }
    }
    .hide{display:none;position: absolute;left: 0;bottom: -100px;}
    
}


#banner{height: 80px;min-height: 80px;
        a{min-height: 80px; display:block;background: url(../images/content.png) center top;}
}


#search{
    height: 159px;
    border-bottom: 1px solid #2d2e2e;
    .shang{height: 120px;
        .logo{
            float: left;
            width: 215px;
            height: 76px;
            margin-top: 21px;
            a{
                display: block;
                overflow: hidden;
                width: 215px;
                height: 76px;
                text-indent: -999px;
                background:#eee url('http://r.ytrss.com/rs/img/header-20160223.gif') 0 0 no-repeat;
            }
        }
        .chart{
            float: right;
            width: 160px;
            height: 34px;
            margin: 40px 0 0 18px;
            position: relative;
            z-index: 402;
            a{
                display: block;
                width: 160px;
                height: 34px;
                background: #323333 url(../images/header-02.png) -55px -76px no-repeat;
            }
            span{
                float: left;
                height: 34px;
                line-height: 34px;
                padding-left: 48px;
                color: #fff;
                }
            strong{
                padding: 0 5px;
                font: 400 16px/34px Arial;
                color: #e5004f;
                vertical-align: middle;
            }
            b{
                float: right;
                margin-right: 20px;
                margin-top: 16px;
                width: 7px;
                height: 4px;
                overflow: hidden;
                transition: transform .2s ease-in 0s;
                -webkit-transition: -webkit-transform .2s ease-in 0s;
                -moz-transition: -moz-transform .2s ease-in 0s;
                background: url(../images/header-02.png) -189px -111px no-repeat;
            }
            }
        .query{
            float: right;
            width: 498px;
            margin-top: 40px;
            position: relative;
            z-index: 401;
          .query-input{
                    width: 494px;
                    height: 30px;
                    margin-bottom: 8px;
                    border: 2px solid #323333;
          }
          .in1{
                width: 440px;
                height: 30px;
                line-height: 30px;
                padding: 0 5px;
                float: left;
                background: transparent;
                border: none;
                color: #888;
          }
          ul{position:absolute;top:3px;z-index: 401;left:0;width: 430px;border: 2px solid #323333;border-top: none;background: #fff;display: none;margin-top: 30px;padding-left: 20px;}
          li{height: 20px;margin-top: 10px;line-height: 20px;color: #333;width: 100%;}
          .btn{
                float: left;
                width: 44px;
                height: 30px;
                text-indent: -1000em;
                border: none;
                overflow: hidden;
                cursor: pointer;
                background: #323333 url(../images/header-02.png) 0 -78px no-repeat;
          }
          .query-x{
                width: 498px;
                height: 18px;
                overflow: hidden;
                a{
                    float: left;
                    margin-right: 12px;
                    color: #888;
                }
                a:hover{
                    text-decoration:underline;
                    color:$chover ;
                }
          }
        }
    }
    #liebiao{
        display: none;
        position: absolute;
        top:0;
        left: 210px;
        width: 495px;
        .liebiao-l{
                float: left;
                width: 295px;
                padding: 8px 20px 0;
                background: #000;
                opacity: 0.6;
                .te{color: $chover;}
                div{
                    padding: 8px 0 7px 0;
                    _padding: 7px 0 6px 0;
                    line-height: 20px;
                    border-bottom: 1px dotted #666;
                }
                h3{
                    width: 295px;
                    text-align: left;
                    font-size: 14px;
                    font-weight: 400;
                    color: #fff;
                }
                p{width: 295px;line-height: 20px;height: 20px;padding-bottom: 5px;}
                a{
                    font-size: 12px;
                    margin-right: 10px;
                    color: #fff;
                    position: relative;
                    float: left;
                    display: inline;
                    width: 50px;
                    height: 20px;
                }
            }
         .liebiao-r{
            float: right;
            width: 145px;
            padding: 19px 0 15px 15px;
            background: #000;
            
            h3{
                    width: 130px;
                    height: 26px;
                    margin-bottom: 5px;
                    text-align: left;
                    font-size: 14px;
                    color: #fff;
                    font-family: "\5fae\8f6f\96c5\9ed1";
                    border-bottom: 1px dotted #666;
            }
            p{padding-bottom: 5px;line-height: 24px;}
            a{
                width: 60px;
                margin-right: 20px;
                color: #fff;
                float: left;
                font: 400 14px/20px '';
                display: inline;
                white-space: nowrap;
                height: 24px;
                position: static;
            }
         }
        }
    .xia{
        clear: both;
        height: 39px;
        position: relative;
        z-index: 400;
        .fenlei{
            float: left;
            width: 210px;
            height: 39px;
            position: relative;
            a{position: absolute;
                z-index: 2;
                display: block;
                width: 210px;
                height: 39px;
                float: left;
                font: 400 18px/39px "\5fae\8f6f\96c5\9ed1";
                color: #fff;
                text-align: center;
                cursor: pointer;}
            .all{
                background: #333;
            }
            ul{
                visibility: visible;
                display: block;
                clear: both;
                float: left;
                position: absolute;
                top: 39px;
                left: 0;
                z-index: 1;
                width: 210px;
                height: 470px;
                border-top: 1px solid #222;
                background-color: #515151;
                -moz-box-shadow: 3px 1px 5px rgba(0,0,0,0.2);
                -webkit-box-shadow: 3px 1px 5px rgba(0,0,0,0.2);
                box-shadow: 3px 1px 5px rgba(0,0,0,0.2);
            }
             .active{background: $chover;a{background: none;}.p{background: none;}}
            ul li{
                float: left;
                width: 210px;
                height: 46px;
                
                margin-bottom: 1px;
                color: #666;
                a{
                     float: left;
                     color: #fff;
                }
               
                .p{
                    float: left;
                    width: 210px;
                    height: 46px;
                    padding-top: 16px;
                    background-color: #333;
                    padding-left: 18px;
                    box-sizing: border-box;
                    position: relative;
                }
                .new{
                   
                    height: 20px;
                    width: 56px;
                    display: inline;
                    font: 400 16px/18px "\5fae\8f6f\96c5\9ed1";
                    em{
                        display: inline-block;
                        width: 17px;
                        height: 17px;
                        margin-right: 7px;
                        vertical-align: top;
                        background: url(../images/header-02.png) no-repeat 0 -108px; 
                    }
                }
                s{
                    float: left;
                    width: 0;
                    height: 16px;
                    line-height: 16px;
                    position: absolute;
                    top: 18px;
                    left: 78px;
                    font-size: 0;
                    overflow: hidden;
                    border-left: 1px solid #999;
                    margin: 0 8px;
                }
                .xiangxi{
                    margin-left: 80px;
                    display: inline-block;
                    height: 20px;
                    width: 60px;
                    font: 400 12px/20px "\5fae\8f6f\96c5\9ed1";
                }
                span{
                    float: right;
                    width: 6px;
                    height: 11px;
                    margin: 5px 15px 0 0;
                    background: url(../images/header-02.png) -209px -111px no-repeat;
                }
            }
        }
        li:hover{
            background: $chover;
        }
        li:first-child{position: relative;}
        li:first-child:hover #liebiao{
            display: block;
        }
        .nav{
            float: left;
            height: 39px;
            li{
                float: left;
                height: 39px;
                padding: 0 15px;
                position: relative;
                z-index: 1;
            }
            a{
                float: left;
                height: 39px;
                overflow: hidden;
                font: 400 16px/20px "\5fae\8f6f\96c5\9ed1";
                color: #323333;
                text-align: center;
            }
            span{
                float: left;
                height: 26px;
                position: relative;
                padding: 10px 10px 0;
                border-bottom: 3px solid #fff;
            }
        }
        .jifen{
            float: right;
            height: 38px;
            padding-top: 1px;
            color: #cbcbcb;
           a{  color: #666;
               margin: 0 8px;
               font: 400 14px/38px "\5fae\8f6f\96c5\9ed1";
           }
        }
    }
    .nav li:hover{
        border-bottom: 2px solid $chover;
        background: #fff;
    }
}
